<template >
    <div class="demo">
        <h1> 名称:{{name}}</h1>
        <h1>地址:{{address}}</h1>
        <button @click="showName"></button>
    </div>
</template>
<script>
//组件交互相关的代码(数据、方法等)

//分别暴露
// export const school = Vue.extend({
//     data() {
//         return {
//             schoolName:'清华',
//             address: '北京'
//         }
//     }
//    })
// export {school}  统一暴露
// export default school 默认暴露

export default {
    name:'School',
    data() {
        return {
            name:'清华',
            address: '北京'
        }
    },
    methods: {
        showName(){
            alert(this.name)
        }
    },
   }
</script>

<style>
/* 组件的样式 */

.demo{
    background-color: orange;
}
</style>